<template>
  <div class="app-container calendar-list-container">
    <el-button
              type="primary"
              size="mini"
              style="margin-top: 5px;"
              @click="beforOpenDialog(1,{})"
              >新增</el-button
            >
      <!-- filter 条件查询 -->
    <!-- <div class="filter-container" style="display: flex;justify-content:flex-start">
      <el-input clearable @keyup.enter.native="handleFilter" v-model="listQuery.code" style="width: 200px;margin-right:15px;" class="filter-item" placeholder="编码" >
      </el-input>
      <br/>
      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
    </div> -->
    <!--表格 -->
    <el-table
      :data="list"
      element-loading-text="给我一点时间"
      v-loading="loading.list"
      border
      fit
      highlight-current-row
      style="width: 100%;margin-top: 20px"
    >
      <el-table-column type="index" label="序号" align="center" width="80px"/>
      <el-table-column prop="equipmentId" label="充电桩编号" align="center" width="100">
          <template slot-scope="scope">
            <div class="fx">
              {{
                scope.row.equipmentId == 0
                ? "提供":"不提供"
              }}
            </div>
          </template>
      </el-table-column>
       <el-table-column prop="smokeStatus" label="明火传感器状态" align="center" width="120">
         <template slot-scope="scope">
            <div class="fx">
              {{
                scope.row.smokeStatus == 0
                ? "提供":"不提供"
              }}
            </div>
          </template>
      </el-table-column>
      <el-table-column prop="waterTankStatus" label="水箱水位状态" align="center" width="120">
          <template slot-scope="scope">
            <div class="fx">
              {{
                scope.row.waterTankStatus == 0
                ? "提供":"不提供"
              }}
            </div>
          </template>
      </el-table-column>
      <el-table-column prop="waterSensorStatus" label="水浸传感器状态" align="center" width="120">
          <template slot-scope="scope">
            <div class="fx">
              {{
                scope.row.waterSensorStatus == 0
                ? "提供":"不提供"
              }}
            </div>
          </template>
      </el-table-column>
      <el-table-column prop="fireArea" label="火灾区域" align="center">
          <template slot-scope="scope">
            <div class="fx">
              {{
                scope.row.fireArea == 0
                ? "提供":"不提供"
              }}
            </div>
          </template>
      </el-table-column>
      <el-table-column prop="fireSign" label="火灾标志" align="center">
          <template slot-scope="scope">
            <div class="fx">
              {{
                scope.row.fireSign == 0
                ? "提供":"不提供"
              }}
            </div>
          </template>
      </el-table-column>
      <el-table-column prop="microSwitch" label="微动开关" align="center">
          <template slot-scope="scope">
            <div class="fx">
              {{
                scope.row.microSwitch == 0
                ? "提供":"不提供"
              }}
            </div>
          </template>
      </el-table-column>
      <el-table-column prop="levelWarning" label="液位警告" align="center">
          <template slot-scope="scope">
            <div class="fx">
              {{
                scope.row.levelWarning == 0
                ? "提供":"不提供"
              }}
            </div>
          </template>
      </el-table-column>
      <el-table-column prop="selfCheckStatus" label="自检灯状态" align="center" width="100">
          <template slot-scope="scope">
            <div class="fx">
              {{
                scope.row.selfCheckStatus == 0
                ? "提供":"不提供"
              }}
            </div>
          </template>
      </el-table-column>
      <el-table-column prop="emergencySwitch" label="应急开关" align="center">
          <template slot-scope="scope">
            <div class="fx">
              {{
                scope.row.emergencySwitch == 0
                ? "提供":"不提供"
              }}
            </div>
          </template>
      </el-table-column>
      <el-table-column prop="equipmentAddress" label="充电桩地址" align="center" width="100">
          <template slot-scope="scope">
            <div class="fx">
              {{
                scope.row.equipmentAddress == 0
                ? "提供":"不提供"
              }}
            </div>
          </template>
      </el-table-column>
      <el-table-column prop="equipmentStatus" label="充电桩使用情况" align="center" width="120">
          <template slot-scope="scope">
            <div class="fx">
              {{
                scope.row.equipmentStatus == 0
                ? "提供":"不提供"
              }}
            </div>
          </template>
      </el-table-column>
      <el-table-column prop="code" label="编码" align="center"/>
      <el-table-column label="操作" align="center" fixed="right" width="130">
        <template slot-scope="scope">
            <el-button
              type="warning"
              size="mini"
              style="margin-top: 5px;margin-left: 10px"
              @click="beforOpenDialog(2, scope.row)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              size="mini"
              style="margin-top: 5px"
              @click="detele(scope.row.id)"
              >删除</el-button
            >
          </template>
      </el-table-column>
    
    </el-table>
    <!-- pagination 分页 -->
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.pageNum"
        :page-sizes="[10, 20, 30, 40,100,300,500]"
        :page-size="listQuery.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <el-dialog :title="diglogTitle" :visible.sync="dialog.add" width="500px">
      <el-form
        :model="addQuery"
        :rules="bindRules"
        ref="bindForm"
        label-position="right"
        label-width="120px"
      >
        <el-form-item label="充电桩编号" prop="equipmentId">
          <el-select 
            v-model="addQuery.equipmentId" 
            filterable 
            placeholder=""
            style="width: 240px">
            <el-option
              v-for="(item,index) in optionsYn"
              :key="index"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="明火传感器状态" prop="smokeStatus">
          <el-select 
            v-model="addQuery.smokeStatus" 
            filterable 
            placeholder=""
            style="width: 240px">
            <el-option
              v-for="(item,index) in optionsYn"
              :key="index"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="水箱水位状态" prop="waterTankStatus">
          <el-select 
            v-model="addQuery.waterTankStatus" 
            filterable 
            placeholder=""
            style="width: 240px">
            <el-option
              v-for="(item,index) in optionsYn"
              :key="index"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="水浸传感器状态" prop="waterSensorStatus">
          <el-select 
            v-model="addQuery.waterSensorStatus" 
            filterable 
            placeholder=""
            style="width: 240px">
            <el-option
              v-for="(item,index) in optionsYn"
              :key="index"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="火灾区域" prop="fireArea">
          <el-select 
            v-model="addQuery.fireArea" 
            filterable 
            placeholder=""
            style="width: 240px">
            <el-option
              v-for="(item,index) in optionsYn"
              :key="index"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="火灾标志" prop="fireSign">
          <el-select 
            v-model="addQuery.fireSign" 
            filterable 
            placeholder=""
            style="width: 240px">
            <el-option
              v-for="(item,index) in optionsYn"
              :key="index"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="微动开关" prop="microSwitch">
          <el-select 
            v-model="addQuery.microSwitch" 
            filterable 
            placeholder=""
            style="width: 240px">
            <el-option
              v-for="(item,index) in optionsYn"
              :key="index"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="液位警告" prop="levelWarning">
          <el-select 
            v-model="addQuery.levelWarning" 
            filterable 
            placeholder=""
            style="width: 240px">
            <el-option
              v-for="(item,index) in optionsYn"
              :key="index"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="自检灯状态" prop="selfCheckStatus">
          <el-select 
            v-model="addQuery.selfCheckStatus" 
            filterable 
            placeholder=""
            style="width: 240px">
            <el-option
              v-for="(item,index) in optionsYn"
              :key="index"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="应急开关" prop="emergencySwitch">
          <el-select 
            v-model="addQuery.emergencySwitch" 
            filterable 
            placeholder=""
            style="width: 240px">
            <el-option
              v-for="(item,index) in optionsYn"
              :key="index"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="充电桩地址" prop="equipmentAddress">
          <el-select 
            v-model="addQuery.equipmentAddress" 
            filterable 
            placeholder=""
            style="width: 240px">
            <el-option
              v-for="(item,index) in optionsYn"
              :key="index"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="充电桩使用情况" prop="equipmentStatus">
          <el-select 
            v-model="addQuery.equipmentStatus" 
            filterable 
            placeholder=""
            style="width: 240px">
            <el-option
              v-for="(item,index) in optionsYn"
              :key="index"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="密钥" prop="code">
          <el-input
            clearable
            v-model="addQuery.code"
            style="width: 240px"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog.add = false">取消</el-button>
        <el-button type="primary" :loading="loading.add" @click="add(addQuery.type,'bindForm')"
          >确定</el-button
        >
      </div>
    </el-dialog>
    <!-- 回到顶部 -->
    <BackToTop></BackToTop>
  </div>
</template>
<script>
import { getlist,deletethirdparty,addthirdparty,updatethirdparty } from "@/api/interfaceManagement";
import { parseTime, getdTime } from "@/utils/index";

import BackToTop from "@/components/BackToTop";
export default {
  name: "pushField",
  components: {
    BackToTop
  },
  data() {
    return {
        // 卡类型
       cardTypeOptions:[
          {
        value:'1',
        label:'城市卡'
        },
        { 
        value:'2',
        label:'设备卡'
        }
      ],
      loading: {
        list: false,
        add: false
      },
      dialog: {
        view: false
      },
      total: 0,
      listQuery: {
        pageNum: 1,
        pageSize: 10
      },
      list: null,
      downloadLoading: false,
      // 设备规则
      bindRules: {
        equipmentId: [
          { required: true, message: "充电桩编号不能为空!", trigger: "change" },
        ],
        smokeStatus: [
          { required: true, message: "明火传感器状态不能为空!", trigger: "change" },
        ],
        waterTankStatus: [
          { required: true, message: "水箱水位状态不能为空!", trigger: "change" },
        ],
        waterSensorStatus: [
          { required: true, message: "水浸传感器状态不能为空!", trigger: "change" },
        ],
        fireArea: [
          { required: true, message: "火灾区域不能为空!", trigger: "change" },
        ],
        fireSign: [
          { required: true, message: "火灾标志不能为空!", trigger: "change" },
        ],
        microSwitch: [
          { required: true, message: "微动开关不能为空!", trigger: "change" },
        ],
        levelWarning: [
          { required: true, message: "液位警告不能为空!", trigger: "change" },
        ],
        selfCheckStatus: [
          { required: true, message: "自检灯状态不能为空!", trigger: "change" },
        ],
        emergencySwitch: [
          { required: true, message: "应急开关不能为空!", trigger: "change" },
        ],
        equipmentAddress: [
          { required: true, message: "充电桩地址不能为空!", trigger: "change" },
        ],
        equipmentStatus: [
          { required: true, message: "充电桩使用情况不能为空!", trigger: "change" },
        ],
        code: [
          { required: true, message: "密钥不能为空!", trigger: "change" },
        ],
      },
      addQuery: {},
      diglogTitle: '新增',
      dialog: {
        add: false
      },
      optionsYn: ['提供','不提供'],
    };
  },

  methods: {
  //导出
   //导出
    handleDownload() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['序号','昵称','手机号','卡号','可用时长','卡类型','所属城市', '所属设备Id','所属设备编号','是否使用','是否过期','开始时间','结束时间','创建时间']
        const filterVal = [ 'index',	'nickName', 'userPhone','cardNo','time', 'cardTypeInfo', 'address','equipmentId','equipmentNumber', 'isUseInfo', 'isPastInfo','startTime','endTime','ctime']
        const data = this.formatJson(filterVal, this.list)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: '用户月卡列表'
        })
        this.downloadLoading = false
      })
    },
    // 数据筛选
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
          return v[j]
      }))
    },
   
    //获取列表
    async getList() {
      this.loading.list = true;
      try {
         //调用服务器接口
        const { data } = await getlist({
          ...this.listQuery
        });
        console.log('data',data)
        this.list = data.records
        this.total = data.total;
      } catch (error) {}
      this.loading.list = false;
    },
    //删除
    detele(id) {
      this.$confirm("是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        try {
          //调用服务器接口
          const { data } = await deletethirdparty({
            id
          });
          this.$message({
            type: "success",
            message: "删除成功",
          });
          this.getList();
        } catch (error) {}
      });
    },
    //新增、修改
    async add(type,form) {
      this.loading.add = true
      this.$refs[form].validate(async (valid) => {
        if (valid) {
          try {
              let query = Object.assign({},this.addQuery)
              delete query.type
              query.equipmentId = query.equipmentId == '提供'?0:1
              query.smokeStatus = query.smokeStatus == '提供'?0:1
              query.waterTankStatus = query.waterTankStatus == '提供'?0:1
              query.waterSensorStatus = query.waterSensorStatus == '提供'?0:1
              query.fireArea = query.fireArea == '提供'?0:1
              query.fireSign = query.fireSign == '提供'?0:1
              query.microSwitch = query.microSwitch == '提供'?0:1
              query.levelWarning = query.levelWarning == '提供'?0:1
              query.selfCheckStatus = query.selfCheckStatus == '提供'?0:1
              query.emergencySwitch = query.emergencySwitch == '提供'?0:1
              query.equipmentAddress = query.equipmentAddress == '提供'?0:1
              query.equipmentStatus = query.equipmentStatus == '提供'?0:1
              const data = type === 1?await addthirdparty(query):await updatethirdparty(query)
              console.log(data)
              this.dialog.add = false
              this.loading.add = false
              this.$message({
                type: "success",
                message: data.msg,
              });
              this.getList()
          } catch (error) {
            this.loading.add = false
          }
        } else {
          return false;
        }
      })
    },
    beforOpenDialog(type,item){
      if(type == 1){
        this.diglogTitle = '新增'
        this.addQuery = {
          equipmentId: '',
          smokeStatus: '',
          waterTankStatus: '',
          waterSensorStatus: '',
          fireArea: '',
          fireSign: '',
          microSwitch: '',
          levelWarning: '',
          selfCheckStatus: '',
          emergencySwitch: '',
          equipmentAddress: '',
          equipmentStatus: '',
          code: ''
        }
      } else{
        this.addQuery = {
          id: item.id,
          equipmentId: item.equipmentId == 0?'提供':'不提供',
          smokeStatus: item.smokeStatus == 0?'提供':'不提供',
          waterTankStatus: item.waterTankStatus == 0?'提供':'不提供',
          waterSensorStatus: item.waterSensorStatus == 0?'提供':'不提供',
          fireArea: item.fireArea == 0?'提供':'不提供',
          fireSign: item.fireSign == 0?'提供':'不提供',
          microSwitch: item.microSwitch == 0?'提供':'不提供',
          levelWarning: item.levelWarning == 0?'提供':'不提供',
          selfCheckStatus: item.selfCheckStatus == 0?'提供':'不提供',
          emergencySwitch: item.emergencySwitch == 0?'提供':'不提供',
          equipmentAddress: item.equipmentAddress == 0?'提供':'不提供',
          equipmentStatus: item.equipmentStatus == 0?'提供':'不提供',
          code: item.code
        }
        this.diglogTitle = '修改'
      }
      this.addQuery.type = type
      this.dialog.add = true
    },
    //点击查找
    handleFilter() {
      this.listQuery.pageNum = 1;
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val;
      this.getList();
    },
  },

  created() {
    this.getList();
  }
};
</script>
<style lang="scss" scoped>
/deep/ .el-carousel__container {
  height: 500px !important;
}
</style>
